<template>
    <div>
        <!-- 扫描特效组件 -->
        <div style="width:var(--container-width);height:var(--container-height);border:1px solid green;">
            <div style="position:absolute;z-index:0;width:inherit;height:inherit;">
                <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);top:calc(0px - var(--angle-weight));left:calc(0px - var(--angle-weight));"></div>
                <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);top:calc(0px - var(--angle-weight));right:calc(0px - var(--angle-weight));"></div>
                <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);bottom:calc(0px - var(--angle-weight));left:calc(0px - var(--angle-weight));"></div>
                <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);bottom:calc(0px - var(--angle-weight));right:calc(0px - var(--angle-weight));"></div>
            </div>
            <div style="position:absolute;z-index:10;width:inherit;height:inherit;background-color:white;text-align: center">
                <img v-if="ok && photoUrl" :src="photoUrl"  alt="拍摄照片" style="width: 638px;height: 480px;">
                <video v-else ref="videoElement" autoplay></video>
                <canvas style="display:none" ref="canvasElement"></canvas>
                <el-button type="primary" plain @click="takePhoto">拍摄照片</el-button>
            </div>
            <div style="position:absolute;z-index:20;width:inherit;height:inherit;overflow: hidden;">
                <div style="width:inherit;height:var(--scan-wake-size);animation: scan 4s ease-in-out infinite;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import {compare_base64} from '@/api/face/face_test'
export default {
    data() {
        return {
            photoUrl: null,
            faceInfo: null,
            videoElement: null,
            canvasElement: null,
            ok: false,
        };
    },
    watch:{
        ok(n,o){
            if (n){
                this.shutdown();
            }
        }
    },
    mounted() {
        this.initCamera();
    },
    methods: {
        initCamera() {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(stream => {
                    this.videoElement = this.$refs.videoElement;
                    this.videoElement.srcObject = stream;
                    this.videoElement.play();
                    this.canvasElement = this.$refs.canvasElement;
                }).catch(error => {
                    console.error('无法访问摄像头：', error);
                });
        },
        takePhoto() {
            const context = this.canvasElement.getContext('2d');
            // 将视频流的画面绘制到Canvas中
            context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
            // 获取Canvas中的图像数据
            const imageData = this.canvasElement.toDataURL('image/png');
            // 显示拍摄的照片
            this.photoUrl = imageData;
            this.faceRecognition(this.photoUrl);
        },
        faceRecognition(image){
            compare_base64(image).then(response=>{
                if (response.code == '200'){
                    this.ok = true;
                    this.$modal.msgSuccess("识别成功");
                }
            })
        },
        shutdown(){
            this.videoElement.srcObject.getTracks()[0].stop();
        }
    },
    destroyed() {
        this.shutdown();
    }
}
</script>
<style type="text/css">
:root {
    --container-width: 638px; /*组件宽度*/
    --container-height: 480px; /*组件高度*/
    --angle-size: 100px; /*四角边框效果尺寸*/
    --angle-weight: 4px; /*四角边框粗细，数值越小越粗*/
    --angle-color: rgb(90, 206, 23);
    --scan-wake-size: 60px; /*扫描拖光的长度*/
    --scan-wake-color: rgb(90, 206, 23);/*扫描拖光颜色*/
}
@keyframes scan {
    0% {
        /*最开始块从顶部往下移动，块的位置需要溢出容器，处于容器顶部上方，块的背景颜色从底部到顶部由绿色逐渐透明*/
        margin-top: calc(0px - var(--scan-wake-size));
        background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
    }
    49% {
        /*动画进行到一半时间时，块必须移动到容器底部并溢出，完成从上到下扫描效果*/
        margin-top: var(--container-height);
        background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
    }
    50% {
        /*调转颜色方向，准备往回扫（从下往上）*/
        margin-top: var(--container-height);
        background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
    }
    100% {
        /*往回扫*/
        margin-top: calc(0px - var(--scan-wake-size));
        background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
    }
}
</style>
